<template>
  <div>
    <div>
<!--      <div class="cards">-->
<!--        <el-button type="primary" style="margin-right: 10px" @click="handleAdd">+ 新增</el-button>-->
<!--        <el-button type="warning" style="margin-right: 20px" @click="delBatch">批量删除</el-button>-->
<!--        <el-input style="width:240px;margin-right: 10px; text-align: center" v-model="data.username" placeholder="请输入用户名查询" :prefix-icon="Search"></el-input>-->
<!--        <el-button type="primary" @click="load">查 询</el-button>-->
<!--        <el-button type="primary" @click="reset">重 置</el-button>-->
<!--      </div>-->
      <!--数据表-->
      <div class="cards" style="margin-top: 10px">
        <el-table :data="data.tableData" @selection-change="handleSelectionChange" stripe>
<!--          <el-table-column type="selection" width="55"></el-table-column>-->
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="用户名" prop="username"></el-table-column>
          <el-table-column label="用户角色" prop="userRole"></el-table-column>
<!--          <el-table-column label="类名" prop="className"></el-table-column>-->
          <el-table-column label="方法名" prop="methodName"></el-table-column>
          <el-table-column label="请求URL" prop="requestUrl"></el-table-column>
          <el-table-column label="执行时间(毫秒)" prop="executionTime" ></el-table-column>
          <el-table-column label="状态" prop="status">
            <template #default="scope">
              {{ scope.row.status === 1 ? '成功' : '失败' }}
            </template>
          </el-table-column>
<!--          <el-table-column label="IP地址" prop="ipAddress"></el-table-column>-->
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-pagination
              @current-change="load"
              @size-change="load"
              v-model:current-page="data.pageNum"
              v-model:page-size="data.pageSize"
              :page-sizes="[5, 10, 15, 20]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="data.total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { Search, Delete, Edit } from "@element-plus/icons-vue";
import { ref } from "vue";
import request from "@/utils/request.js";
import { ElMessage, ElMessageBox } from "element-plus";

const data = reactive({
  tableData: [],
  pageNum: 1,
  pageSize: 10,
  total: 0,
  formVisible: false,
  ids: [],
  list:[]
});

const load = () => {
  request.get("/operation/selectByPage", {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
    }
  }).then((res) => {
    if (res.code === 200) {
      data.tableData = res.data.list;
      data.total = res.data.total;
    } else {
      ElMessage.error(res.message || "查询失败");
    }
  }).catch((error) => {
    ElMessage.error("请求失败: " + error.message);
  });
};
load();

// 重置
const reset = () => {
  data.username = null;
  load();
};

// 新增
const handleAdd = () => {
  data.formVisible = true;
  data.form = {
    id: null,
    username: "",
    userRole: "",
    className: "",
    methodName: "",
    requestUrl: "",
    executionTime: 0,
    status: 1,
    ipAddress: "",
    createTime: new Date()
  };
};

const save = () => {
  if (data.form.id) {
    update();
  } else {
    add();
  }
};

const add = () => {
  request.post("/operation/add", data.form).then((res) => {
    if (res.code === 200) {
      data.formVisible = false;
      ElMessage.success("添加成功");
      load();
    } else {
      ElMessage.error(res.message);
    }
  });
};

// 编辑
const update = () => {
  request.put("/operation/update", data.form).then((res) => {
    if (res.code === 200) {
      data.formVisible = false;
      ElMessage.success("修改成功");
      load();
    } else {
      ElMessage.error(res.message);
    }
  });
};

// 删除
const handleDelete = (id) => {
  ElMessageBox.confirm("删除数据后无法恢复，您确认删除吗？", "温馨提示", {
    type: "warning"
  }).then(() => {
    request.delete(`/operation/delete/${id}`).then((res) => {
      if (res.code === 200) {
        ElMessage.success("删除成功");
        load();
      } else {
        ElMessage.error(res.message);
      }
    });
  }).catch(() => {});
};

// 编辑
const handleUpdate = (row) => {
  data.form = JSON.parse(JSON.stringify(row)); // 深拷贝
  data.formVisible = true;
};

// 多选
const handleSelectionChange = (rows) => {
  data.ids = rows.map((row) => row.id);
};

// 批量删除
const delBatch = () => {
  if (data.ids.length === 0) {
    ElMessage.warning("请选择数据");
    return;
  }
  ElMessageBox.confirm("删除数据后无法恢复，您确认删除吗？", "温馨提示", {
    type: "warning"
  }).then(() => {
    request.delete("/operation/deleteBatch", { data: data.ids }).then((res) => {
      if (res.code === 200) {
        ElMessage.success("删除成功");
        load();
      } else {
        ElMessage.error(res.message);
      }
    });
  }).catch(() => {});
};
</script>

<style scoped>
.cards {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
</style>
